<html>
<body>
<canvas id="c1" width="250" height="250"></canvas>
<canvas id="c2" width="250" height="250"></canvas>
<br>
<canvas id="c3" width="250" height="250"></canvas>
<canvas id="c4" width="250" height="250"></canvas>
<script type="text/javascript">
var ctx1 = document.getElementById('c1').getContext('2d');
var ctx2 = document.getElementById('c2').getContext('2d');
var ctx3 = document.getElementById('c3').getContext('2d');
var ctx4 = document.getElementById('c4').getContext('2d');
ctx1.fillStyle = 'green';
ctx2.fillStyle = 'green';
ctx3.fillStyle = 'green';
ctx4.fillStyle = 'green';
ctx1.fillRect(25, 25, 200, 200);
ctx2.fillRect(25, 25, 200, 200);
if (window.createImageBitmap) {
    ctx4.fillRect(25, 25, 200, 200);
}

if (window.testRunner) {
    testRunner.waitUntilDone();
}
var video = document.createElement("video");
video.autoplay = false;
video.addEventListener("canplaythrough", videoLoaded, false);
video.src = "resources/green.ogv";

function videoLoaded() {
    var w = video.videoWidth;
    var h = video.videoHeight;
    ctx3.drawImage(video, 0, 0, w, h, 75,  75, 100, 100);
    ctx3.drawImage(video, 0, 0, w, h, 25,  25,  50,  50);
    ctx3.drawImage(video, 0, 0, w, h, 75,  25,  100, 50);
    ctx3.drawImage(video, 0, 0, w, h, 175, 25,  50,  50);
    ctx3.drawImage(video, 0, 0, w, h, 25,  75,  50,  100);
    ctx3.drawImage(video, 0, 0, w, h, 175, 75,  50,  100);
    ctx3.drawImage(video, 0, 0, w, h, 25,  175, 50,  50);
    ctx3.drawImage(video, 0, 0, w, h, 75,  175, 100, 50);
    ctx3.drawImage(video, 0, 0, w, h, 175, 175, 50,  50);
    if (window.testRunner) {
        testRunner.notifyDone();
    }
}

</script>
</body></html>